<template>
    <div class="front">
        <el-form :model="tableData" label-width="120px">
            <el-form-item class="input" label="仓库编码">
                <el-input v-model="tableData.warehouseCode"/>
            </el-form-item>
            <el-form-item class="input" label="仓库名称">
                <el-input v-model="tableData.warehouseName"/>
            </el-form-item>
            <el-form-item class="input" label="仓库状态">
                <el-select v-model="tableData.status" placeholder="请选择仓库状态" clearable>
                    <el-option label="正常" value="1"/>
                    <el-option label="停用" value="2"/>
                    <el-option label="禁入" value="3"/>
                    <el-option label="禁出" value="4"/>
                </el-select>
            </el-form-item>
        </el-form>
        <el-button class="search" type="primary" @click="handleGetWarehouseList()">查询</el-button>
        <el-button class="search" type="primary" @click="resetSearch()">重置</el-button>
    </div>

    <div class="tail">
        <div class="tail-action">
            <el-button type="primary" @click="addDialogVisible = true">新增仓库</el-button>
        </div>
        <el-table :data="tableData.data" border style="width: 100%">
            <el-table-column prop="warehouseCode" label="仓库编码" min-width="60"/>
            <el-table-column prop="warehouseName" label="仓库名称" min-width="60"/>
            <el-table-column prop="status" label="仓库状态" min-width="60">
                <template #default="{ row }">
                    <span v-if="row.status === '1'">正常</span>
                    <span v-if="row.status === '2'">停用</span>
                    <span v-if="row.status === '3'">禁入</span>
                    <span v-if="row.status === '4'">禁出</span>
                </template>
            </el-table-column>
            <el-table-column prop="usedCap" label="容量使用情况" min-width="60">
                <template #default="{ row }">
                    已使用：{{ row.usedCap }}<br/>
                    最大容量：{{ row.maxCap === -1 || row.maxCap === '' ? '不限' : row.maxCap }}
                </template>
            </el-table-column>
            <el-table-column prop="isDefault" label="默认仓库" min-width="40">
                <template #default="{ row }">
                    <span v-if="row.isDefault === '1'">是</span>
                    <span v-if="row.isDefault === '0'">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="city" label="城市" min-width="60"/>
            <el-table-column prop="address" label="地址" min-width="60"/>
            <el-table-column prop="createTime" :formatter="formatDate" label="创建时间" min-width="60"/>
            <el-table-column prop="createBy" label="创建人" min-width="60"/>
            <el-table-column prop="remark" label="备注" min-width="60"/>
            <el-table-column fixed="right" label="操作" min-width="60">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleOpenEdit(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="handleDeleteWarehouse(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="tableData.currentPage" v-model:page-size="tableData.pageSize"
                           layout="prev, pager, next ,total,sizes" :total="tableData.total"
                           @current-change="handleGetWarehouseList()"
                           @size-change="handleGetWarehouseList()"/>
        </div>
    </div>

    <div class="dialog-list">
        <el-dialog v-model="addDialogVisible" title="新建仓库" width="35%" :show-close="false"
                   :close-on-click-modal="false">
            <div>
                <el-form :model="warehouseForm" label-width="120px" :rules="warehouseRules">
                    <el-form-item label="仓库编码" prop="warehouseCode" :required="true">
                        <el-input v-model="warehouseForm.warehouseCode"/>
                    </el-form-item>
                    <el-form-item label="仓库名称" prop="warehouseName" :required="true">
                        <el-input v-model="warehouseForm.warehouseName"/>
                    </el-form-item>
                    <el-form-item label="仓库状态">
                        <el-select v-model="warehouseForm.status" placeholder="请选择仓库状态">
                            <el-option label="正常" value="1"/>
                            <el-option label="停用" value="2"/>
                            <el-option label="禁入" value="3"/>
                            <el-option label="禁出" value="4"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市" prop="city" :required="true">
                        <el-input v-model="warehouseForm.city"/>
                    </el-form-item>
                    <el-form-item label="地址" prop="address" :required="true">
                        <el-input v-model="warehouseForm.address"/>
                    </el-form-item>
                    <el-form-item label="默认仓库">
                        <span style="margin-right: 5px">否</span>
                        <el-switch v-model="warehouseForm.isDefault" active-value="1" inactive-value="0">
                        </el-switch>
                        <span style="margin-left: 5px">是</span>
                    </el-form-item>
                    <el-form-item label="最大容量">
                        <el-input v-model="warehouseForm.maxCap" placeholder="不填为无限容量">
                            <template v-slot:append><span>个</span></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="warehouseForm.remark"/>
                    </el-form-item>


                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAddWarehouse()">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="editDialogVisible" title="编辑仓库" width="35%" :show-close="false"
                   :close-on-click-modal="false">
            <div>
                <el-form :model="warehouseForm" label-width="120px" :rules="warehouseRules">
                    <el-form-item label="仓库编码" prop="warehouseCode" :required="true">
                        <el-input v-model="warehouseForm.warehouseCode"/>
                    </el-form-item>
                    <el-form-item label="仓库状态" prop="warehouseName" :required="true">
                        <el-input v-model="warehouseForm.warehouseName"/>
                    </el-form-item>
                    <el-form-item label="仓库状态">
                        <el-select v-model="warehouseForm.status" placeholder="请选择仓库状态">
                            <el-option label="正常" value="1"/>
                            <el-option label="停用" value="2"/>
                            <el-option label="禁入" value="3"/>
                            <el-option label="禁出" value="4"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市" prop="warehouseName" :required="true">
                        <el-input v-model="warehouseForm.city"/>
                    </el-form-item>
                    <el-form-item label="地址" prop="address" :required="true">
                        <el-input v-model="warehouseForm.address"/>
                    </el-form-item>
                    <el-form-item label="默认仓库">
                        <span style="margin-right: 5px">否</span>
                        <el-switch v-model="warehouseForm.isDefault" active-value="1" inactive-value="0">
                        </el-switch>
                        <span style="margin-left: 5px">是</span>
                    </el-form-item>
                    <el-form-item label="最大容量">
                        <el-input v-model="warehouseForm.maxCap" placeholder="不填为无限容量">
                            <template v-slot:append><span>个</span></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="warehouseForm.remark"/>
                    </el-form-item>


                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm()">取消</el-button>
                    <el-button type="primary" @click="handleUpdateWarehouse()">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {ref, defineComponent, reactive, toRefs,} from "vue";
import {ElMessageBox, ElMessage} from 'element-plus'
import {onMounted} from "vue";
import {getWarehouseList, addWarehouse, deleteWarehouse, updateWarehouse} from '@/api/setting/setting'

export default defineComponent({
    name: "Warehouse",
    components: {},

    setup() {
        let tableData = reactive({
            data: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            warehouseCode: '',
            warehouseName: '',
            status: '',
        });

        const warehouseForm = reactive({
            id: '',
            warehouseCode: '',
            warehouseName: '',
            status: '1',
            city: '',
            address: '',
            isDefault: '0',
            maxCap: '',
            remark: '',
        });

        const addDialogVisible = ref(false)
        const editDialogVisible = ref(false)
        const warehouseRules = reactive({
            warehouseCode: [{required: true, message: '请输入内容', trigger: 'blur'},],
            warehouseName: [{required: true, message: '请输入内容', trigger: 'blur'}],
            city: [{required: true, message: '请输入内容', trigger: 'blur'}],
            address: [{required: true, message: '请输入内容', trigger: 'blur'}],
        });

        onMounted(() => {
            handleGetWarehouseList()
        })


        const handleGetWarehouseList = () => {
            let data = {
                currentPage: tableData.currentPage,
                pageSize: tableData.pageSize,
                warehouseCode: tableData.warehouseCode,
                warehouseName:  tableData.warehouseName,
                status: tableData.status,
            }
            getWarehouseList(data).then((res) => {
                if (res.code !== 200) {
                    ElMessage({
                        type: 'error',
                        message: res.msg,
                    })
                    return;
                }
                res.rows.forEach(item => {
                    if (item.maxCap === -1) {
                        item.maxCap = ''
                    }
                })

                tableData.data = res.rows
                tableData.currentPage = res.currentPage
                tableData.pageSize = res.pageSize
                tableData.total = res.total
            })
        }

        const handleAddWarehouse = () => {
            ElMessageBox.confirm('确认提交?')
                .then(() => {
                    addWarehouse(warehouseForm).then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                type: 'success',
                                message: '创建成功',
                            })
                            addDialogVisible.value = false
                            handleGetWarehouseList()
                            resetForm()
                        } else {
                            ElMessage({
                                type: 'error',
                                message: res.msg,
                            })
                        }

                    })
                })
        }

        const handleOpenEdit = (data) => {
            editDialogVisible.value = true
            warehouseForm.id = data.id
            warehouseForm.warehouseCode = data.warehouseCode
            warehouseForm.warehouseName = data.warehouseName
            warehouseForm.status = data.status
            warehouseForm.city = data.city
            warehouseForm.address = data.address
            warehouseForm.isDefault = data.isDefault
            warehouseForm.maxCap = data.maxCap
            warehouseForm.remark = data.remark
        }

        const resetForm = () => {
            editDialogVisible.value = false
            warehouseForm.id = ''
            warehouseForm.warehouseCode = ''
            warehouseForm.warehouseName = ''
            warehouseForm.status = '1'
            warehouseForm.city = ''
            warehouseForm.address = ''
            warehouseForm.isDefault = '0'
            warehouseForm.maxCap = ''
            warehouseForm.remark = ''
        }

        const handleUpdateWarehouse = () => {
            ElMessageBox.confirm('确认提交?')
                .then(() => {
                    updateWarehouse(warehouseForm).then((res) => {
                        if (res.code === 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            })
                            resetForm()
                            handleGetWarehouseList()
                        } else {
                            ElMessage({
                                type: 'error',
                                message: res.msg,
                            })
                        }
                    })
                })
        }
        const handleDeleteWarehouse = (warehouseId) => {
            ElMessageBox.confirm(
                '是否要删除该仓库?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                deleteWarehouse(warehouseId).then((res) => {
                    handleGetWarehouseList()
                    if (res.code === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                    } else {
                        ElMessage({
                            type: 'error',
                            message: res.msg,
                        })
                    }


                })
            })
        }

        const formatDate = (row) => {
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: "numeric",
                minute: "numeric",
                second: "numeric"
            };
            return new Date(row.createTime).toLocaleDateString('zh-CN', options);
        }

        const resetSearch = () => {
            tableData.warehouseCode = ''
            tableData.warehouseName = ''
            tableData.status = ''
        }
        return {
            warehouseForm,
            warehouseRules,
            tableData, handleGetWarehouseList, resetSearch,
            handleDeleteWarehouse,
            addDialogVisible, handleOpenEdit, handleAddWarehouse,
            editDialogVisible, resetForm, handleUpdateWarehouse,
            formatDate
        };
    },
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.front {
    background-color: #fff;
    padding: 10px;
    display: flex;

    .input {
        float: left;
    }

    .search {
        margin-left: 50px;
    }
}

.center {
    margin: 10px;
}

.form-add-checkbox {
    width: 200px;
    height: 260px;
    display: block;
    border: solid 1px #c9c9c9;

    .form-add-checkbox-item {
        width: 180px;
        margin: auto;
    }
}

.tail {
    background-color: #fff;
    margin-top: 40px;
    padding: 10px;

    .tail-action {
        margin-bottom: 10px;
        display: flex;
    }
}

.el-table {
    .el-button {
        margin-left: 0px; //调整按钮不对齐
    }
}
</style>
